import { useEffect, useState } from 'react';
import './modeler.less';
import { Properties } from '@/pages/workflow/model/components/modeler/properties';
import { ModelerService } from '@/pages/workflow/model/components/modeler/ModelerService';
import { Divider, message } from 'antd';
import { request } from '@umijs/max';

export const BpmnModeler = (props: {
  url: string;
  modelerService: ModelerService;
}) => {
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    props.modelerService.init('#bpmn-canvas', setFlag);

    request(props.url, { headers: { accept: 'application/xml' } })
      .then((resp) => {
        props.modelerService.modeller.importXML(resp);
      }).catch((err: any) => {
      message.error('获取流程图错误');
      throw err;
    });
  }, []);

  return (
    <div className="bpmn-modeler">
      <div id="bpmn-canvas" />
      <Divider type="vertical" className="fullHeight" />
      <Properties modelerService={props.modelerService} />
    </div>
  );
};
